有了基本場景後

我們如何處理場景置中+旋轉呢？

1. 利用 顯示視野旋轉範圍

 <OrbitControls
        ref={ref_zero}
        makeDefault
        minAzimuthAngle={-Math.PI / 16}
        maxAzimuthAngle={ Math.PI / 16}
        minPolarAngle={Math.PI / 3}
        maxPolarAngle={Math.PI / 3}
        enableZoom={true}
        enablePan={true}
        zoomSpeed={0.3}
        // target={ref_zero}
      />

2. 利用 pmndrs/drei 中的 將場景中主要物件作為目標

Calculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the makeDefault prop. fit fits the current view on first render. clip sets the cameras near/far planes. observe will trigger on window resize.

<Bounds fit clip observe damping={6} margin={1.2}>
  <mesh />
</Bounds>

中藥堂

<Bounds fit clip observe margin={1}>
            <ModelCMD onClick={(event) => click_to_Lef(!clicked_to_Left)} position={[0, 21, 0]} scale={3} rotation={[-Math.PI / 2 + 0.5, -Math.PI / 2, 0]} />
            <ModelDraco scale={10} position={[5 - 6, 1.5 + 1, 1]} receiveShadow castShadow />
            <group position={[5 - 5, 43 + 2, -11]}>
              <GoldenText scale={5} rotation={[0, Math.PI / 2, Math.PI / 2 + 0.1]} receiveShadow />
            </group>
</Bounds>